<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="姓名">
        <el-input
          placeholder="请输入姓名"
          v-model="name"
          @keyup.native.enter="search"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-divider content-position="left">导演列表</el-divider>
    <!-- 呈现导演列表 -->
    <person
      v-for="item in actors"
      :key="item.id"
      :name="item.director_name"
      :avatar="item.director_avatar"
      :id="item.id"
      @del="deleteActor(item.id)"
    ></person>
  </div>
</template>

<script>
import Person from "@/components/Person.vue";
import myaxios from "@/http/MyAxios.js";
import httpApi from "@/http/index.js";
export default {
  components: { Person },

  data() {
    return {
      actors: [], //存储演员列表
      name: "", //绑定姓名输入框
    };
  },
  // 组件挂载完毕后执行
  mounted() {
    this.init();
  },

  methods: {
    // 子传父,捕获到用户点击了叉子
    deleteActor(id) {
      this.$confirm("此操作将永久删除该导演, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let url = "http://localhost:3010/movie-director/del";
          myaxios.post(url, { id }).then((res) => {
            if (res.data.code === 200) {
              this.init();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 初始化数据
    init() {
      // let url = "http://localhost:3010/movie-actors";
      // let params = { page: 1, pagesize: 100 };
      // myaxios.get(url, params).then((res) => {
      //   this.actors = res.data.data;
      // });
      httpApi.directorApi.queryAllDirectors().then(res=>{
        console.log('导演列表',res)
          this.actors=res.data.data
        }
      )
    },
    // 通过关键字模糊查询导演列表
    search() {
      if (this.name.trim()) {
        // let url = "http://localhost:3010/movie-actors/name";
        // let params = { name: this.name };
        // myaxios.post(url, params).then((res) => {
        //   // 更新列表
        //   this.actors = res.data.data;
          httpApi.directorApi.queryDierctorByName({name:this.name}).then(res=>{
            this.actors=res.data.data
          // })
        });
      } else {
        this.init();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>